<template>
  <div v-if="addVisible" class="printSample">
    <div class="editpanel  twoStageWindow" style="padding-bottom:0;">
      <div class="twoStageWindowTitle">
        打印样品标签
        <div class="twoStageWindowClose">
          <el-button class="penalButton" type="primary" size="mini" v-on:click="printOpintons">打印</el-button>
          <el-button class="penalButton" size="mini" v-on:click="close">取消</el-button>
        </div>
      </div>
      <div class="containercontent" style="margin-top: 40px;height:calc(100% - 40px);padding:20px;">
        <el-table :data="printData" size="mini" @cell-click="sampleTableCurrentChange" style="height: 100%;" highlight-current-row ref="sampleLists" class="sampleLists tableCon">
          <el-table-column label="编码" min-width="90px" property="sampleCode" fixed show-overflow-tooltip>
          </el-table-column>
          <el-table-column property="sampleName" label="名称" min-width="100px" fixed show-overflow-tooltip>
          </el-table-column>

           <el-table-column property="capacity" label="样品体积" min-width="80px">
            <template slot-scope="scope">
              <el-input  v-model="scope.row.capacity" size="mini" :min="1" :max="10" class= "deal" oninput="this.value=this.value.replace(/[^0-9]+/,'');" disabled></el-input>
            </template>
          </el-table-column>
          <el-table-column property="bottleType" label="容器类型" min-width="100px">
            <template slot-scope="scope">
              <el-select v-model="scope.row.bottleType" size="mini">
                <el-option v-for="item in bottleOptions" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column property="spec" label="容器规格" min-width="80px">
            <template slot-scope="scope">
              <el-input  v-model="scope.row.spec" size="mini" :min="1" :max="10" class= "deal" oninput="this.value=this.value.replace(/[^0-9]+/,'');"></el-input>
            </template>
          </el-table-column>
          <el-table-column property="printNum" label="打印数量" min-width="80px">
            <template slot-scope="scope">
              <el-input  v-model="scope.row.printNum" size="mini" :min="1" :max="10" class= "deal" oninput="this.value=this.value.replace(/[^0-9]+/,'');"></el-input>
            </template>
          </el-table-column>
        </el-table>

        <div class="sampleInfo">
          <div class="sampleTitle">样品标签</div>
          <el-table size="mini" :data="sampleDetail" v-if="reload" style="height:calc(100% - 36px);">
            <el-table-column prop="title" width="90px">
            </el-table-column>
            <el-table-column prop="value" :overflow-show-tooltip="true">
            </el-table-column>
          </el-table>
          <!--<div style="height:calc(100% - 350px);width:80%;margin:auto;">
            <img :src="'data:image/jpeg;base64,' + sampleInfoForm.encode" style="width:80%;">
          </div>-->
        </div>
      </div>

    </div>
    <print-select :addVisible.sync="printListPop" :printTemplateList="printTemplateList" :printData="printData"></print-select>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  const printSelect = () => import('./printSelect.vue');

  export default {
    data() {
      return {
        printData: [], //样品表数据
        reload: true,
        reloadmore: true,
        sampleInfoForm: { encode: null },
        imgUrl: null,
        sampleDetail: [{ title: '样品名称：' }, { title: '样品编号：' }, { title: '监测点位：' }, { title: '采样人员：' }, { title: '采样日期：' },  { title: '是否盲码：' },{ title: '保存时间(h)：' },{ title: '保存剂：' },{ title: '检测项目：' },],
        printListPop: false, //打印模板选择弹框
        printTemplateList: [], //打印模板

      }
    },
    computed: {
      ...mapState(['enableStatus', 'tableHeightA', 'yesorno', 'enableStatus', 'caiyangrenData','bottleOptions']),
    },
    components: {
      printSelect,
    },
    props: ['newOrEdit', 'canEdit', 'jiancebiaoqian', 'addVisible', 'multipleSelection', 'acceptOrregist'],
    mounted(){
      this.$store.dispatch("getAllBottles");
      // console.log(this.bottleOptions)
    },
    watch: {
      addVisible(val) {
        if (val) {

          this.getBottle();


        }
      }
    },
    methods: {
      close() {
        this.$parent.printTableShow = false;
        this.printData = []
      },
      //默认选中第一条样品
      setCurrent(row) {
        this.$nextTick(() => {
          this.$refs.sampleLists.setCurrentRow(this.printData[0]);
          if(this.printData.length != 0){
              this.sampleTableCurrentChange(this.printData[0],{label:"姓名"}) //随意默认一个label
          }

        })
      },
      getBottle(){
        this.$http({
            method: 'post',
            apiUrl: '/detection/getBottleBySamples.htm',
            params: this.multipleSelection,
            isJson: true
          }).then(res => {
            if(res.code == 0){
              for(var i in res.data){
                 this.$set(res.data[i],'printNum',1)
                 if(res.data[i].capacity == undefined){
                   this.$set(res.data[i],'capacity',100)
                }
                // spec
                this.$set(res.data[i],'spec',res.data[i].capacity)
                for(var j in this.bottleOptions){
                  if(this.bottleOptions[j].id == res.data[i].bottleType){
                     this.$set(res.data[i],'bottleTypeName',this.bottleOptions[j].name)
                  }
                }
              }
              this.printData = res.data;
              if(res.data && res.data.length) {
                this.setCurrent()
              } else {
                this.sampleDetail.forEach((item) => {
                  item.value = "";
                })
                this.reLoad();
              }
             }
          })

      },
      sampleTableCurrentChange(row, column) {

        if (column.label != "采样日期" && column.label != "打印数量" ) {
          this.$http({
            method: 'post',
            apiUrl: '/detection/getBottleInfo.htm',
            params: { md:row.md,id:row.fRef},
            isJson: false
          }).then(res => {
            if (res.code === 0) {
              this.sampleInfoForm = res.data;

              var arrItem = [];
              for (var i in res.data.itemBeans) {
                arrItem.push(res.data.itemBeans[i].itemName);
              }

              this.sampleDetail[0].value = res.data.name;
              this.sampleDetail[1].value = res.data.code;
              this.sampleDetail[2].value = res.data.monitorName?res.data.monitorName:"---";
              this.sampleDetail[3].value = res.data.collectionManName?res.data.collectionManName:"---";
              this.sampleDetail[4].value =this.util.formatterDate({ cellValue: res.data.collectionDate });

              this.sampleDetail[5].value = res.data.doBlind?'是':'否';
              this.sampleDetail[6].value = row.saveTime?res.data.monitorName:"---";
              this.sampleDetail[7].value = row.media?res.data.monitorName:"---";
              this.sampleDetail[8].value =JSON.parse(JSON.stringify(arrItem.join(',')));
              this.reLoad();

            }

          })
        }
      },
      // 是否重新加载
      reLoad() {
        this.reload = false;
        this.$nextTick(() => {
          this.reload = true;
        })
      },
      reLoadMore() {
        this.reloadmore = false;
        this.$nextTick(() => {
          this.reloadmore = true;
        })
      },
      // 打印模板选项
      printOpintons() {
         if(this.printData.length == 0){
            this.$notify({
              type:"warning",
              message:"没有可打印的样品!",
              title:"警告"
            })
            return;
         }
        this.$http({
          method: 'post',
          apiUrl: '/printBusiness/getPrintTemList.htm',
          params: { businessCode: "printSample" },
          isJson: false
        }).then(res => {
          if (res.code === 0) {
            this.printTemplateList = res.data;
            this.printListPop = true;
          }
        })
      },
      // arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      //   console.log(row, column, rowIndex, columnIndex)
      //   if (rowIndex % 2 === 0) {
      //     if (columnIndex === 0) {
      //       return [1, 2];
      //     } else if (columnIndex === 1) {
      //       return [0, 0];
      //     }
      //   }
      // },
      // dayincaiyangren() {

      // }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .printSample .el-dialog {
    margin-top: 10vh !important;
    height: 80%;
  }

  .printSample .el-dialog .el-dialog__body {
    height: calc(100% - 85px);
    padding: 10px;
    overflow: auto
  }

  .printSample .sampleLists {
    width: 60%;
    height: 90%;
    overflow: auto;
    float: left;
  }

  .printSample .sampleInfo {
    width: calc(40% - 5px);
    height: 90%;
    overflow: auto;
    float: right;
  }

  .printSample .sampleTitle {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    height: 36px;
    width: 100%;
    color: #666;
    line-height: 36px;
    background: #EAF4FE !important
  }

  .el-form-item__label {
    /*border-right:1px solid #666;*/
  }

  .sampleInfo .el-table .el-table__header-wrapper .has-gutter tr {
    display: none;
  }
</style>
